/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="orderC" >
		<view class="orderC-body" style="margin-bottom: 110upx;">
			<view class="head">
				<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
				<view class='back-img' @click="back()">
					<image src="/static/fanhui-black.png" mode=""></image>
				</view>
				<view class="head-btns">
					<image v-if="!isFenxiang" src="/static/fenxiang.png" @click="togglePopup('bottom','share')" mode=""></image>
					<image v-if="isFenxiang" src="/static/fenxiang-1.png" @click="togglePopup('bottom','share')" mode=""></image>
					<image v-if="!isShoucang" src="/static/shoucang.png" @click="coll()" mode=""></image>
					<image v-if="isShoucang" src="/static/shoucang-1.png" @click="coll()" mode=""></image>
					<image v-if="!isAdd" src="/static/add.png" mode=""  @click="toOrder"></image>
					<image v-if="isAdd" src="/static/add-1.png" mode=""  @click="toOrder"></image>
					<image class="xingcheng" src="/static/xingcheng.png" mode="" @click="toOrder"></image>
				</view>
			</view>
			<!-- 
			<view class="food-type">
				<view :class="typeIndex==0?'type-item-ac':'type-item'" @click="typeIndex=0">199元双人餐</view>
				<view :class="typeIndex==1?'type-item-ac':'type-item'" @click="typeIndex=1">268元4-6人餐</view>
				<view :class="typeIndex==2?'type-item-ac':'type-item'" @click="typeIndex=2">199元双人餐</view>
				<view :class="typeIndex==3?'type-item-ac':'type-item'" @click="typeIndex=3">199元双人餐</view>
			</view> -->
			<view class="order-title">
				<image  src="/static/msdz.png" mode=""></image>
				<text class="order-title-shop">新韩小馆烤肉</text>
				<text class="order-title-food">招牌二人餐</text>
			</view>
			<view class="hd-list">
				<view class="hd-item">
					<image class="item-img" src="/static/shop/choose.png" mode=""></image>
					<text class="item-text">免预约</text>
				</view>
				<view class="hd-item">
					<image class="item-img" src="/static/shop/choose.png" mode=""></image>
					<text class="item-text">随时退</text>
				</view>
			</view>
			<view class="pic-list">
				<scroll-view class="scroll-view_H"  scroll-x="true" scroll-left="0">
					<!-- <view  class="scroll-view-item_H " v-for="index in 5 " :key='index'> -->
						<image class="scroll-view-item_H "  src="/static/banner.png" mode="" v-for="index in 5 " :key='index'></image>
						<!-- <image src="/static/banner.png" mode=""></image> -->
					<!-- </view> -->
					<!-- <view  class="scroll-view-item_H " style="margin-right: 0;">查看更多</view> -->
				</scroll-view>
			</view>
			<view class="order-list">
				<view class="list-title">
					<text class='shu'></text>
					<text>菜品</text>
				</view>
				<view class="cai-list">
					<view class="cai-item" v-for='(item,index) in caiData' :key='index'>
						<view class="cai-dot"></view>
						<text class="cai-name">{{item.name}}</text>
						<text class="cai-num">({{item.num}}份)</text>
						<text class="cai-price">￥{{item.price}}</text>
					</view>
				</view>
			</view>
			<view class="order-list">
				<view class="list-title">
					<text class='shu'></text>
					<text>购买须知</text>
				</view>
				<view class="buy-know">
					<text class="buy-know-label">有效期：</text>
					<text class="buy-know-item">· 2019.7.26至2019.11.23 23:69（周末、法定节假日通用）</text>
					<text class="buy-know-label">使用时间：</text>
					<text class="buy-know-item">· 10:00 - 21:30</text>
					<text class="buy-know-label">使用规则：</text>
					<text class="buy-know-item">· 无需预约，消费高峰期可能需要等位</text>
					<text class="buy-know-item">· 商家提供免费WIFI</text>
				</view>
			</view>
			<!-- <view style="width: 100%;height: 150upx;margin-top: 40upx;">
				<view class="address">
					<view class="address-info">
						<image src="/static/pos-blue.png" mode=""></image>
						<text class="city">大连庄河市仙人洞镇北部</text>
						<text class="way">乘坐198支线到仙人洞镇，步行650米</text>
					</view>
				</view>
				<view class="begin">
					<text>导航</text>
					<image src="/static/jiantou.png" mode=""></image>
				</view>
			</view> -->
			<Comment></Comment>
			<view class="order-list">
				<view class="list-title">
					<text class='shu'></text>
					<text>小伙伴们推荐</text>
				</view>
				<view class="food-area">
					<view class="food-item" v-for='(item,inedx) in likeData' :key='inedx' @click="toDetail">
						<image :src="item.img" mode="aspectFill"></image>
						<text class="food-name">{{item.name}}</text>
						<view class="food-fp">
							<text class="food-fen">{{item.fen}} <text class="fen">分</text></text>
							<text class="food-pl">{{item.pl}}评论</text>
						</view>
						<text class="food-tip">{{item.add}}|{{item.tip}}</text>
						<text class="food-far">{{item.far}}km</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<text class="bottom-price"><text style="font-size: 24upx;">￥</text>99.8</text>
			<view class="bottom-buy" @click="toOrder">立即预购</view>
		</view>
		
		<!-- 分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn" @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
		<popuper v-if='this.$store.state.showAddCuss.show' ></popuper>
		<Collection v-if='showColl' />
	</view>
</template>

<script>
	import Comment from '@/components/Comment.vue'
	import popuper from '@/components/Popuper.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default{
		data(){
			return{
				isFenxiang:true,
				isShoucang:false,
				isAdd:false,
				typeIndex:0,
				type: '',//uniPopup组件类型
				showColl:false,
				statusBarHeight:global.statusBarHeight + 'px',
				caiData:[
					{
						name:'秘制猪颈肉',
						num:1,
						price:23
					},
					{
						name:'拌明太鱼',
						num:1,
						price:26
					},
					{
						name:'海鲜葱饼',
						num:1,
						price:28
					},
					{
						name:'热面',
						num:1,
						price:23
					},
					{
						name:'调料费',
						num:2,
						price:4
					}
				],
				likeData:[
					{
						name:'新韩小馆烤肉',
						fen:9.6,
						pl:56,
						prize:199,
						far:2.3,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'糖果奶茶店',
						fen:8.3,
						pl:23,
						prize:168,
						far:6,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'美美四川火锅',
						fen:8.5,
						pl:212,
						prize:199,
						far:4.3,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					},
					{
						name:'胡忠串串香',
						fen:9.2,
						pl:88,
						prize:199,
						far:3.2,
						add:'浑南区',
						tip:'中式烧烤',
						img:'/static/banner.png'
					}
				],
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					
				],
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			toOrder(){
				uni.navigateTo({
					url:'foodOrder'
				})
			},
			togglePopup(type,open){
				this.type = type;
				this.$refs[open].open()
				document.body.style.overflow = 'hidden'
			},
			cancel(type) {
				this.$refs[type].close()
			},
			coll(){
				this.showColl=true
			},
			closeColl(){
				this.showColl=false
				document.body.style.overflow = 'scroll'
			},
		},
		created(){
			
		},
		components: {
			Comment,
			uniPopup,
			popuper
		},
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		min-height: 40upx;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.orderC{
		width: 100%;
		height: 100vh;
		overflow: scroll;
		position: relative;
	}
	.orderC-body{
		width: 100%;
		height: 100vh;
		position: absolute;
	}
	.head{
		width: 750upx;
		height: 120upx;
		position: fixed;
		z-index: 2;
		background: #FFFFFF;
	}
	.back-img{
		width: 50upx;
		height: 50upx;
		float: left;
		text-align: center;
		vertical-align: middle;
	}
	.back-img image{
		width: 24px;
		height: 24px;
	}
	.head-btns{
		width: 300upx;
		height: 37upx;
		margin-top: 10upx;
		margin-left: 37upx;
		float: right;
	}
	.head-btns image{
		width: 35upx;
		height: 35upx;
		margin-right: 30upx;
		float: left;
	}
	.xingcheng{
		width: 54upx !important;
		height: 28upx !important;
		margin-top: -10upx;
		margin-left: -15upx;
	}
	.food-type{
		width: 700upx;
		height: 50upx;
		margin-left: 25upx;
		margin-right: 25upx;
		display: flex;
		flex-direction: row;
		margin-top: 140upx;
		border-bottom: #DCDCDC solid 1upx;
	}
	.type-item{
		width: auto;
		height: 50upx;
		text-align: center;
		padding: 0 10upx;
		font-size: 24upx;
	}
	.type-item-ac{
		width: auto;
		height: 48upx;
		text-align: center;
		padding: 0 10upx;
		font-size: 24upx;
		border-bottom: #54ABFF solid 4upx;
	}
	.order-title{
		height: 70upx;
		width: 700upx;
		margin-left: 25upx;
		margin-top: 140upx;
		/* margin-top: 40upx; */
	}
	.order-title image{
		height: 28upx;
		width: 28upx;
		margin-left: 0upx;
		position: absolute;
		margin-top: -6upx;
	}
	.order-title-shop {
		width: 70%;
		margin-left: 40upx;
		height: 30upx;
		display: block;
		font-size: 26upx;
		line-height: 20upx;
	}
	.order-title-food {
		width: 70%;
		height: 30upx;
		display: block;
		font-size: 32upx;
		line-height: 20upx;
		margin-top: 20upx;
	}
	
	.pic-list{
		width: 700upx;
		height: 187upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 40upx;
	}
	.scroll-view_H{
		width: 700upx;
		height: 187upx;
		white-space: nowrap;
	}
	.scroll-view-item_H {
		display: inline-block;
		width: 257upx;
		height: 187upx;
		margin-right: 40upx;
		border-radius: 10upx;
		text-align: center;
		font-size: 28upx;
		color: #999999;
		background: #ECECEC;
	}
	/* .scroll-view-item_H image{
		display: inline-block;
		width: 257upx;
		height: 187upx;
		margin-right: 40upx;
		border-radius: 10upx;
		text-align: center;
		font-size: 28upx;
		color: #999999;
		background: #ECECEC;
	} */
	.hd-list{
		width: 750upx;
		height: 40upx;
		display: flex;
		margin-top: 30upx;
		
		flex-direction: row;
	}
	.hd-item{
		width: 180upx;
		height: 40upx;
		margin-left: 25upx;
	}
	.item-img{
		width: 28upx;
		height: 28upx;
		margin-top: 8upx;
		margin-right: 20upx;
		float: left !important;
	}
	.item-text{
		float: left;
		font-size: 24upx;
		color: #55A0FF;
		line-height: 40upx;
	}
	
	.order-list{
		width: 750upx;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		display: table;
		margin-top: 20upx;
	}
	
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
	}
	.list-title text{
		font-size: 28upx;
		font-weight: bolder;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.cai-list{
		width: 750upx;
		height: auto;
		
	}
	.cai-item{
		width: 750upx;
		height: 40upx;
		/* position: relative; */
	}
	.cai-dot{
		width: 4upx;
		height: 4upx;
		float: left;
		margin-left: 58upx;
		background: #151515;
		margin-top: 20upx;
		/* position: absolute; */
		margin-right: 20upx;
	}
	.cai-name{
		font-size: 26upx;
		line-height: 40upx;
		margin-left: 78;
		float: left;
	}
	.cai-num{
		font-size: 24upx;
		color: #999999;
		float: left;
		line-height: 40upx;
		margin-left: 20upx;
	}
	.cai-price{
		font-size: 26upx;
		float: right;
		margin-right: 40upx;
		line-height: 40upx;
	}
	.buy-know{
		width: 750upx;
		height: auto;
	}
	.buy-know-label{
		width: 300upx;
		height: 40upx;
		font-size: 26upx;
		color: #999999;
		margin-left: 42upx;
		margin-top: 20upx;
		display: block;
	}
	.buy-know-item{
		width: 666upx;
		height: 40upx;
		font-size: 24upx;
		margin-left: 42upx;
		display: block;
		
	}
	.food-area{
		width: 684upx;
		margin-left: auto;
		margin-right: auto;
		display: table;
	}
	.food-item:nth-child(odd){
		margin-top: 20upx;
		width: 330upx;
		float: left;
	}
	.food-item:nth-child(even){
		margin-top: 20upx;
		width: 330upx;
		float: right;
	}
	
	.food-item:nth-child(1),.food-item:last-child{
		height: 652upx;
	}
	.food-item:nth-child(1) image,.food-item:last-child image{
		border-radius: 10px 10px 0 0;
		width: 330upx;
		height: 430upx; 
	}
	.food-item{
		height: 700upx;
	}
	.food-item image{
		border-radius: 10px 10px 0 0;
		width: 330upx;
		height: 479upx;
	}
	.food-name{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		font-size: 27upx;
		font-weight: bold;
		display: block;
	}
	
	.food-tip{
		width: auto;
		margin-left: 24upx;
		height: 40upx;
		margin-top: 20upx;
		color: #999999;
		float: left;
		font-size: 24upx;
		display: block;
	}
	.food-pl{
		width: 143upx;
		font-size: 25upx;;
		color: #999999;
		height: 50upx;
		margin-top: 18upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		
		overflow: hidden;
		float: left;
	}
	.food-fen{
		width: 90upx;
		display: block;
		height: 50upx;
		margin-top: 10upx;
		text-align: left;
		float: left;
		font-size: 30upx;
		color:#DD540A;
	}
	.food-fp{
		width: 293upx;
		margin-left: auto;
		margin-right: auto;
		height: 50upx;
	}
	.food-fen .fen{
		font-size: 25upx;
	}
	.food-far{
		width: 90upx;
		margin-left: 24upx;
		height: 40upx;
		margin-top: 20upx;
		color: #999999;
		float: right;
		font-size: 26upx;
		display: block;
	}
	.address{
		margin-top: 30upx;
		margin-left: 37upx;
		width: 450upx;
		height: auto;
		display: table;
		float: left;
	}
	.address-info{
		width: 450upx;
		height: auto;
		float: left;
	}
	.address-info image{
		float: left;
		width: 26upx;
		margin-top: 10upx;
		height: 30upx;
	}
	.city{
		float: left;
		font-size: 30upx;
		height: 30upx;
		
		margin-left: 20upx;
	}
	.way{
		width: 450upx;
		display: block;
		margin-top: 60upx;
		font-size: 24upx;
		color: #888888;
	}
	.pl-num{
		font-size: 24upx;
		color: #888888;
		margin-left: 40upx;
	}
	.begin{
		width: 80upx;
		height: 60upx;
		float: right;
		margin-top: 40upx;
		line-height: 60upx;
		margin-right: 24upx;
	}
	.begin text{
		text-align: center;
		color: #333333;
		font-size: 24upx;
		float: left;
	}
	.begin image{
		width: 25upx;
		margin-top: 20upx;
		height: 25upx;
		float: right;
	}
	.bottom{
		width:750upx;
		height: 124upx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
	}
	.bottom-price{
		margin-left: 20upx;
		font-size: 34upx;
		float: left;
		line-height: 124upx;
		color: #207EFD;
	}
	.bottom-buy{
		float: right;
		margin-right: 20upx;
		width:260upx;
		height: 76upx;
		margin-top: 24upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		color: #FFFFFF;
		font-size: 28upx;
		text-align: center;
		line-height: 76upx;
		border-radius: 40upx;
	}
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		font-size: 30upx;
		color: #666;
	}
</style>
